<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>电子档案袋</title>
	<link rel="stylesheet" href="./styles/css/common.css">
</head>

<body>
	<script src="http://rsj.beijing.gov.cn/header.js"></script>

	<!-- 档案袋头部 -->
	<div class="bag">
		<div class="bag_nav clearfix">
			<div class="bag_nav_left left">
				<!-- <a  class="a_jycssy" href="./index.html">就业超市首页</a> -->
				<!-- <img class="left" style="width:480px;margin: 11px 0 20px" src="./styles/images/top_logo1.png" alt=""> -->
				<div class="bag_nav_left_bottom clearfix">
					<a href="./index.html" class="left">
						<img src="./styles/images/logo.png" alt="" >
					</a>
					<span class="left">个人电子档案袋</span>
				</div>
			</div>
			<div class="bag_nav_right right">
				<img class="picture" src="" alt="">
				<span class="bag_nav_name person_nav_name"></span>
			</div>
		</div>
	</div>
	<!-- 档案袋内容区域 -->
	<div class="bag_con" id="J_area">
		<script type="text/html" id="J_item">
		<!-- 就业经历 -->
		<%if(+data.executeResult === 1){%>
			<% var _data = data.data%>

		<div class="bag_list jyjl" id="jyjl">
			<div class="bag_list_top">
				<p class="bag_list_name"><%=_data[0].jyjl_info.title%></p>
			</div>
			<div class="bag_list_bottom">
				<div class="bag_b_top">
					<p class="bag_list_time">
							<%=_data[0].jyjl_info.cxrq%>
					</p>
				</div>
				<div class="bag_b_center" num='0'>
						<%if(_data[0].jyjl_info.jyjl.length > 0){%>

					<%for(var i=0;i<_data[0].jyjl_info.jyjl.length;i++){%>
						<%var _item = _data[0].jyjl_info.jyjl[i]%>
					<table border="0" cellspacing="0" cellpadding="0" class="table">
						<tr>
							<td class="td_name" width="12%">求职登记时间</td>
							<td width="21%"><%=_item.qzdjsj%></td>
							<td class="td_name" width="12%">求职机构</td>
							<td width="28%"><%=_item.qzjg%></td>
							<td class="td_name" width="12%">服务专员</td>
							<td width="15%"><%=_item.fwzy%></td>
						</tr>
					</table>
					<%}%>
					<%}else{%>
						<p class="zw">暂无相关信息</p>
					<%}%>
				</div>
				<div class="bag_b_bottom clearfix">
					<a href="javascript:void(0)" class="right J_show_more">查看更多>></a>
					<a href="javascript:void(0)" class="right J_hide_more">收起</a>
				</div>
			</div>
		</div>
		<!-- 职业技能培训 -->
		<div class="bag_list zyjn" id="zyjn">
			<div class="bag_list_top">
				<p class="bag_list_name"><%=_data[1].zyjnpx_info.title%></p>
			</div>
			<div class="bag_list_bottom">
				<div class="bag_b_top">
					<p class="bag_list_time">
						<%=_data[1].zyjnpx_info.cxrq%>
					</p>
				</div>
				<div class="bag_b_center" num='1'>
						<%if(_data[1].zyjnpx_info.zyjnpx.length > 0){%>
						<%for(var i=0;i<_data[1].zyjnpx_info.zyjnpx.length;i++){%>
								<%var _item = _data[1].zyjnpx_info.zyjnpx[i]%>
					<table border="0" cellspacing="0" cellpadding="0" class="table">
						<tr>
							<td class="td_name" width="12%">培训时间</td>
							<td width="21%"><%=_item.pxsj%></td>
							<td class="td_name" width="12%">培训类型</td>
							<td width="28%"><%=_item.pxlx%></td>
							<td class="td_name" width="12%">培训内容</td>
							<td width="15%"><%=_item.pxnr%></td>
						</tr>
						<tr>
							<td class="td_name" width="12%">证书号</td>
							<td width="21%"><%=_item.zsh%></td>
							<td class="td_name" width="12%">培训学校</td>
							<td width="28%"><%=_item.pxxx%></td>
						</tr>
					</table>
					<%}%>
					<%}else{%>
						<p class="zw">暂无相关信息</p>
					<%}%>
				</div>
				<div class="bag_b_bottom clearfix">
					<a href="javascript:void(0)" class="right J_show_more">查看更多>></a>
					<a href="javascript:void(0)" class="right J_hide_more">收起</a>
				</div>
			</div>
		</div>
		<!-- 待遇享受 -->
		<div class="bag_list dyxs" id="dyxs">
			<div class="bag_list_top">
				<p class="bag_list_name"><%=_data[2].dyxs_info.title%></p>
			</div>
			<div class="bag_list_bottom">
				<div class="bag_b_top">
					<p class="bag_list_time">
						<%=_data[2].dyxs_info.cxrq%>
					</p>
				</div>
				<div class="bag_b_center" num='2'>
					<%if(_data[2].dyxs_info.dyxs.length > 0){%>
						<%for(var i=0;i<_data[2].dyxs_info.dyxs.length;i++){%>
								<%var _item =_data[2].dyxs_info.dyxs[i]%>
					<table border="0" cellspacing="0" cellpadding="0" class="table">
						<tr>
							<td class="td_name" width="12%">享受补贴类型</td>
							<td width="21%"><%=_item.xsbtlx%></td>
							<td class="td_name" width="12%">申请时间</td>
							<td width="28%"><%=_item.sqsj%></td>
							<td class="td_name" width="12%">补贴金额</td>
							<td width="15%"><%=_item.btje%></td>
						</tr>
						<tr>
							<%if(_item.xsbtlx == '技能提升补贴'){%>
								<td class="td_name" width="12%">证书编号</td>
							<%}else{%>
								<td class="td_name" width="12%">批复结果</td>
							<%}%>
							<td width="21%"><%=_item.pfjg%></td>
							<%if(_item.xsbtlx == '技能提升补贴'){%>
								<td class="td_name" width="12%">批复进度</td>
							<%}else{%>
								<td class="td_name" width="12%">批复时间</td>
							<%}%>
							<td width="28%"><%=_item.pfsj%></td>
						</tr>
					</table>
					<%}%>
					<%}else{%>
						<p class="zw">暂无相关信息</p>
					<%}%>
				</div>
				<div class="bag_b_bottom clearfix">
					<a href="javascript:void(0)" class="right J_show_more">查看更多>></a>
					<a href="javascript:void(0)" class="right J_hide_more">收起</a>
				</div>
			</div>
		</div>
		<!-- 人事档案 -->
		<!-- <div class="bag_list dangan" id="dangan">
			<div class="bag_list_top">
				<p class="bag_list_name"><%=_data[3].rsda_info.title%></p>
			</div>
			<div class="bag_list_bottom">
				<div class="bag_b_top">
					<p class="bag_list_time">
						<%=_data[3].rsda_info.cxrq%>
					</p>
				</div>
				<div class="bag_b_center" num='3'>
					<%if(_data[3].rsda_info.rsda.length > 0){%>
						<%for(var i=0;i<_data[3].rsda_info.rsda.length;i++){%>
								<%var _item =_data[3].rsda_info.rsda[i]%>
						<table border="0" cellspacing="0" cellpadding="0" class="table">
							<tr>
								<td class="td_name" width="12%">存档日期</td>
								<td width="21%"><%=_item.cdrq%></td>
								<td class="td_name" width="12%">存档机构</td>
								<td width="28%"><%=_item.cdjg%></td>
								<td class="td_name" width="12%">存档类型</td>
								<td width="15%"><%=_item.cdlx%></td>
							</tr>
							<tr>
								<td class="td_name" width="12%">存档单位</td>
								<td width="21%"><%=_item.cddw%></td>
								<td class="td_name" width="12%">存档状态</td>
								<td width="28%"><%=_item.cdzt%></td>
							</tr>
						</table>
						<%}%>
					<%}else{%>
						<p class="zw">暂无相关信息</p>
					<%}%>

				</div>
				<div class="bag_b_bottom clearfix">
					<a href="javascript:void(0)" class="right J_show_more">查看更多>></a>
					<a href="javascript:void(0)" class="right J_hide_more">收起</a>
				</div>
			</div>
		</div> -->
		<!-- 右侧固定定位 -->
		<div class="bag_fixed">
			<div class="bag_fixed_con">
					<a class="now_a fixed_active" href="javascript:void(0)">就业经历</a>
					<a class="now_a" href="javascript:void(0)">职业技能培训</a>
					<a class="now_a" href="javascript:void(0)">待遇享受</a>
					<!-- <a class="now_a" href="javascript:void(0)">人事档案</a> -->
					<!-- <a class="after_a" href="javascript:void(0)">社会保险</a>
					<a class="after_a" href="javascript:void(0)">信用信息</a>
					<a class="after_a" href="javascript:void(0)">劳动关系</a> -->
			</div>

			<div class="bag_icon_tigger J_hide">></div>
			<div class="bag_icon_tigger J_show"><</div>
		</div>
		<%}%>
	</script>
	</div>
	<!-- 公共尾部 -->
	<!-- <include src="./include/footer.html"></include> -->
	<script src="http://rsj.beijing.gov.cn/footer.js"></script>
</body>
<script src="./common/vendor.js"></script>
<script src="./common/common.js"></script>
<script>
	$(function () {
		var loading = new $.Loading();
		init();
		// 获取基本信息
		getBase();
		// 初始化
		function init() {
			// 存放table前三个的高度对象
			var height_obj = {};
			// 异步请求数据
			var dzdadbh = $.paramObj().dzdadbh;
			$('.person_nav_name').text($.sessionStorageGetItem('dllx').xm);
			if ($.sessionStorageGetItem('dllx').xb == 2) {
				$('.picture').attr('src', './styles/images/v.png');
			} else {
				$('.picture').attr('src', './styles/images/n.png');
			}
			getData();
			function getData() {
				loading.on();
				$.asyncRender({
					url: '/dzdad/grdzda',
					type: 'get',
					wrap: '#J_area',
					tem: '#J_item',
					pos: 'returnData',
				}).always(function () {
					loading.off();
				}).done(function (res) {
					var data = res.returnData;
					if (+data.executeResult === 1) {
						fixed();
						getHeight();

					} else {
						$.layerMsg(data.message, '我知道了', function () {
						});
					}
				})
			}
			// 显示3条高度
			function getHeight() {
				$('.bag_b_center').each(function (k, v) {
					var num = 0;
					var allHeight = 0;
					if ($(v).find('.table').length <= 3) {
						$(v).siblings('.bag_b_bottom').hide();
					} else {
						$(v).find('.table').each(function (index, ele) {
							if (index < 3) {
								num += $(ele).outerHeight(true) + 2;
							}
							allHeight += $(ele).outerHeight(true) + 2;
						});
						height_obj['center' + k] = num;
						height_obj['allHeight' + k] = allHeight;
						$(v).css('height', height_obj['center' + k] + 'px');
					}
				});
			}
			// 点击查看更多
			$(document).on('click', '.J_show_more', function () {
				var $getDiv = $(this).parent().siblings('.bag_b_center');
				var attr_num = $getDiv.attr('num');
				$getDiv.animate({ height: height_obj['allHeight' + attr_num] + 'px' });
				$(this).hide().siblings('.J_hide_more').show();
				$(this).parents('.bag_list').siblings('.bag_list').find('.J_hide_more').trigger('click');
			})
			// 点击收起
			$(document).on('click', '.J_hide_more', function () {
				var $getDiv = $(this).parent().siblings('.bag_b_center');
				var attr_num = $getDiv.attr('num');
				// $getDiv.css('height', height_obj['center'+attr_num] +'px');
				$getDiv.animate({ height: height_obj['center' + attr_num] + 'px' });
				$(this).hide().siblings('.J_show_more').show();
			});

		}
		//右侧滚动固定定位
		function fixed() {
			var fixHeight = $('.bag_fixed').height();
			$('.bag_fixed').css('marginTop', -(fixHeight / 2) + 'px');
			// var fixed_top = $('#jyjl').offset().top;
			// var fixed_right = $('#jyjl').offset().left + 1224;
			$(window).scroll(function () {
				// if ($(window).scrollTop() > fixed_top) {
				// 	$('.bag_fixed').css({
				// 		'position': 'fixed',
				// 		'top': '0',
				// 		'left': fixed_right + 'px'
				// 	});
				// } else {
				// 	$('.bag_fixed').css({
				// 		'position': 'absolute',
				// 		'top': '0',
				// 		'left': '1224px'
				// 	});
				// }
				var arr = [];
				$('.bag_list').each(function (k, v) {
					arr.push($(v).offset().top - 24);
				});
				function dg_arr(arr) {
					$.each(arr, function (k, v) {
						if (arr[k + 1]) {
							if ($(window).scrollTop() > arr[k] && $(window).scrollTop() < arr[k + 1]) {
								$('.now_a').eq(k).addClass('fixed_active').siblings('.now_a').removeClass('fixed_active');
							}
						} else {
							if ($(window).scrollTop() > arr[k]) {
								// $('.now_a').removeClass('fixed_active');
								$('.now_a').eq(k).addClass('fixed_active').siblings('.now_a').removeClass('fixed_active');
							}
						}
					});
				}
				dg_arr(arr);
			});
			$(document).on('click', '.now_a', function () {
				var _index = $(this).index();
				$('body,html').animate({ scrollTop: ($('.bag_list').eq(_index).offset().top) + 'px' }, 200);
				// $('.now_a').removeClass('fixed_active');
				// $(this).addClass('fixed_active');
				// $(window).scrollTop($('.bag_list').eq(_index).offset().top)
			});
			// 刷新页面 固定右侧
			if ($(window).scrollTop() > 0) {
				$(window).scroll();
			}
		}
		$(document).on('click','.J_hide',function(){
			$('.bag_fixed').stop().animate({ width: 0 });
			$('.J_show').show();
			$('.J_hide').hide();
			$('.bag_fixed_con').fadeOut();
		});
		$(document).on('click','.J_show',function(){
			$('.bag_fixed').stop().animate({ width: '120px' });
			$('.J_show').hide();
			$('.J_hide').show();
			$('.bag_fixed_con').fadeIn();
		})
	});

</script>

</html>
